<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="//static/css/bootstrap.min.css">
    <link href="//static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link rel="stylesheet" href="//static/css/public.css">
    <link rel="stylesheet" href="//static/css/font-awesome.min.css">
    <link href="//static/plugins/bootstrap-tree/bootstrap-treeview.css" rel="stylesheet">
    <!-- jquery 提示插件css -->
    <link href="//static/plugins/toastr.min.css" rel="stylesheet">
    <style type="text/css">
        /*地图设备弹出框*/
        .dong-box {
            position: absolute;
            top: 18%;
            left: -229px;
            z-index: 100;
            width: 230px;
            background-color: #fff;
            transition: all 0.5s;
        }

        .equipment-box {
            position: relative;
            width: 230px;
            overflow: hidden;
        }

        .equipment-content {
            height: 400px;
            width: 250px;
            overflow: auto;
        }

        .equipment-title {
            color: #333;
            background-color: #f5f5f5;
            height: 50px;
            line-height: 50px;
            text-align: center;
            transition: width 0.5s;
        }

        .equipment-title-img {
            position: absolute;
            width: 35px;
            height: 50px;
            line-height: 59px;
            background-color: #fff;
            right: -34px;
            top: 216px;
            text-align: center;
            cursor: pointer;
        }

        .equipment-table {
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            overflow: hidden;
        }

        .equipment-table-header {
            background-color: #3c8dbc;
            color: #fff;
        }

        /*地图上部分功能按钮*/
        .mapTopBox {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            width: 100%;
            padding: 5px 10px 0 10px;
            background-color: #fff;
        }

        .choiceBox {
            width: 100px;
            text-align: center;
            line-height: 30px;
            height: 30px;
            background: #a1a1a1;
            font-size: 14px;
            color: #fff;
            float: left;
        }

        .selectBox {
            width: 60px;
            text-align: center;
            line-height: 30px;
            height: 30px;
            background: #fff;
            font-size: 14px;
            border: 1px solid #afafaf;
            float: left;
        }

        .determineBox {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #ffffff;
            cursor: pointer;
            background: #0b7ac0;
            border: none;
            margin-left: 20px;
        }

        .determineBox:hover {
            background: #0a6fae;
        }

        /*暂停 播放 重新播放*/
        .playBtn {
            background-color: #fff;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        /*地图下方日期选择*/
        .mapBottomBox{
            position: absolute;
            bottom:0;
            height: 30px;
            width: 100%;
            background-color: #fff;
        }
        .days-box{
            height: 24px;
            width: 24px;
            line-height: 24px;
            margin-top: 3px;
            margin-left: 5px;
            border-radius: 3px;
            text-align: center;
            cursor: pointer;
        }
        .days-box:hover{
            background-color: #FFF6E5;
        }
        .daysActive{
            background-color: #027dcb;
            color: #fff;
        }
        .daysActive:hover{
            background-color: #027dcb;
            color: #fff;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=1t51luG5BxGrGLW4y9zu3sS6Tz8O3vAG"></script>
    <title>人员管理</title>
</head>
<body style="background-color:#eee">
<div id="app" style="margin-top: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all"
             style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>在线人员</span>
            </div>
            <div class="content-center">
                <div id="treeview7" class="test"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;">
            <!--选项卡切换-->
            <ul id="myTab" class="nav nav-tabs content-title">
                <li style="float:left;padding: 0 0 0 15px;">
                    <span>{{treeTitle.name}}</span>
                </li>
                <li v-for="(tab,index) in menuList" v-bind:class="{active:tab.isActive}">
                    <a data-toggle="tab" @click="tabsSwitch(index)">{{tab.name}}</a>
                </li>
            </ul>
            <div class="content-center">
                <!--地图模式-->
                <div class="tab-card" v-bind:class="{showCard:menuList[1].isActive}">
                    <div id="allmap"></div>
                    <!--在线人员点击循环块-->
                    <div id="equipmentMap" class="dong-box">
                        <div class="equipment-box border-all">
                            <div class="equipment-title border-bottom">
                                在线人员
                            </div>
                            <!--头部-->
                            <div class="float-clear border-bottom equipment-table-header">
                                <div class="float-left equipment-table border-right" style="width: 60px;">
                                    <span>姓名</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 70px;">
                                    <span>编号</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 50px;">
                                    <span>定位</span>
                                </div>
                                <div class="float-left equipment-table border-right" style="width: 48px;">
                                    <span>轨迹</span>
                                </div>
                            </div>
                            <!--循环结构-->
                            <div class="equipment-content">
                                <div class="float-clear border-bottom" v-for="(item,index) in personalList"
                                     v-bind:class="{ personalActive: item.isActive }">
                                    <div class="float-left equipment-table" style="width: 60px;">
                                        <span>{{item.userName}}</span>
                                    </div>
                                    <div class="float-left equipment-table" style="width: 70px;">
                                        <span>{{item.no}}</span>
                                    </div>
                                    <div class="float-left equipment-table" style="width: 50px;cursor: pointer;"
                                         @click="jumpUserMarker(item,index)">
                                        <img src="location.png" style="width: 20px;">
                                    </div>
                                    <div class="float-left equipment-table" style="width: 48px;cursor: pointer;"
                                         @click="personalDriving(item,index)">
                                        <img src="runUser.png" style="width: 20px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="equipment-title-img border-right border-bottom border-top" @click="boxToggle()">
                            <span class="fa fa-angle-right" style="font-size: 30px;"></span>
                        </div>
                    </div>
                    <!--地图上方选择月份 以及功能按钮-->
                    <div class="mapTopBox float-clear border-bottom">
                        <div id="year">
                            <select name="sel1" id="sel1" class="selectBox">
                                <option value="year">年</option>
                            </select>
                            <div class="choiceBox" style="width: 30px;">年</div>
                        </div>
                        <div id="month">
                            <select name="sel2" id="sel2" class="selectBox" style="width: 45px;">
                                <option value="month">月</option>
                            </select>
                            <div class="choiceBox" style="width: 30px;">月</div>
                        </div>
                        <!--暂停 播放 重新播放-->
                        <div onclick="rotateBtnClick()" class="playBtn border-all float-right"
                             style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;">
                            <span class="fa fa-rotate-left" style="margin-right: 5px;"></span>重新播放
                        </div>
                        <div onclick="startBtnClick()" class="playBtn border-top border-bottom float-right">
                            <span class="fa fa-play" style="margin-right: 5px;"></span>播放
                        </div>
                        <div onclick="pauseBtnClick()" class="playBtn border-all float-right"
                             style="border-top-left-radius: 5px;border-bottom-left-radius: 5px;">
                            <span class="fa fa-stop" style="margin-right: 5px;"></span>暂停
                        </div>
                    </div>
                    <!--地图下方日期选择-->
                    <div class="mapBottomBox float-clear border-top">
                        <div class="days-box float-left border-all" v-for="item in days" @click="changeDay(item)" v-bind:class="{daysActive:item.isActive}">
                            <span>{{item.day}}</span>
                        </div>
                    </div>
                </div>
                <!--列表模式-->
                <div class="tab-card" v-bind:class="{showCard:menuList[0].isActive}">
                    <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 0;left: 187px;">查询
                    </button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-field="id"></th>
                            <th data-field="userName">名称</th>
                            <th data-field="no">编号</th>
                            <th data-field="step">状态</th>
                            <th data-field="long">经度</th>
                            <th data-field="lat">纬度</th>
                            <th data-field="mobile">电话</th>
                            <th data-field="email">邮箱</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 主要的脚本 -->
<script src="//static/js/jquery-3.1.1.min.js"></script>
<script src="//static/js/bootstrap.min.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="//static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="//static/js/vue.min.js"></script>
<!--mqtt协议-->
<script src="//static/js/mqttws31.js"></script>
<script src="//static/js/publicServe.js"></script>
<!-- Toastr -->
<script src="//static/plugins/toastr/toastr.min.js"></script>
<!--bootstrap-tree插件-->
<script src="//static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            oldIndex: 0,
            tabIndex: 1,
            treeTitle: {
                id: null,
                name: '请选择'
            },
            menuList: [
                {
                    name: '列表',
                    isActive: false
                },
                {
                    name: '地图',
                    isActive: true
                },
            ],
            personalList: [
                {
                    id: 1,
                    userName: '古县1号泵组',
                    no: '0001',
                    point: {
                        long: 112.607,   //经度
                        lat: 37.803      //纬度
                    },
                    runPoint: [
                        {
                            long: 121.443532,
                            lat: 31.24603
                        },
                        {
                            long: 121.481477,
                            lat: 31.240103
                        },
                        {
                            long: 121.493262,
                            lat: 31.237015
                        },
                        {
                            long: 121.494987,
                            lat: 31.230099
                        },
                        {
                            long: 121.489382,
                            lat: 31.225034
                        },
                        {
                            long: 121.512953,
                            lat: 31.219846
                        },
                        {
                            long: 121.510222,
                            lat: 31.228122
                        },
                        {
                            long: 121.520715,
                            lat: 31.232198
                        },
                        {
                            long: 121.515828,
                            lat: 31.239485
                        },
                        {
                            long: 121.496568,
                            lat: 31.227505
                        },
                        {
                            long: 121.479177,
                            lat: 31.244178
                        }
                    ],
                    personalMarker: null,   //用于绑定地图上弹出详情框使用
                    content: "当前任务:设备维修",
                    isActive: false,
                    step: '正常',
                    day: 230
                },
                {
                    id: 2,
                    userName: '古县2号泵组',
                    no: '0002',
                    point: {
                        long: 112.580,   //经度
                        lat: 37.800      //纬度
                    },
                    runPoint: [
                        {
                            long: 121.443532,
                            lat: 31.24603
                        },
                        {
                            long: 121.481477,
                            lat: 31.240103
                        },
                        {
                            long: 121.493262,
                            lat: 31.237015
                        },
                        {
                            long: 121.494987,
                            lat: 31.230099
                        },
                        {
                            long: 121.489382,
                            lat: 31.225034
                        },
                        {
                            long: 121.512953,
                            lat: 31.219846
                        },
                        {
                            long: 121.510222,
                            lat: 31.228122
                        },
                        {
                            long: 121.520715,
                            lat: 31.232198
                        },
                        {
                            long: 121.515828,
                            lat: 31.239485
                        },
                        {
                            long: 121.496568,
                            lat: 31.227505
                        },
                        {
                            long: 121.479177,
                            lat: 31.244178
                        }
                    ],
                    personalMarker: null,
                    content: "当前任务:设备维修",
                    isActive: false,
                    step: '正常',
                    day: 120
                }
            ],
            days: [],               //日期中天数数组
            personalTime:'',        //选择的日期
        },
        methods:{
            /**
             * 选取天数
             */
            changeDay:function(day) {
                var year = $('#sel1').val();
                var month = $('#sel2').val();
                if(year=='year'){toastr.info('请选择年');return}
                if(month=='month'){toastr.info('请选择月');return}
                for(var i=0;i<vm.days.length;i++){
                    vm.days[i].isActive = false;
                }
                day.isActive = true;
                vm.personalTime = year+'-'+month+'-'+day.day;
            }
        }
    });
    //boot table
    var $table = $("#table");
    var tableList = [];
    for (var i = 1; i < 20; i++) {
        tableList.push({
            id: i,
            no: '0' + i,
            userName: '测试用户' + i,
            mobile: '1888888888' + i,
            email: '304706@163.com',
            time: '2018-1-10',
            step: '在岗',
            long: 112.607,   //经度
            lat: 37.803,      //纬度
            destination:'/hhh'
        });
    }

    //生成日期
    $(function () {
        //生成1900年-2100年
        for (var i = 2017; i <= 2100; i++) {
            var option = document.createElement('option');
            option.setAttribute('value', i);
            option.innerHTML = i;
            sel1.appendChild(option);
        }
        //生成1月-12月
        for (var i = 1; i <= 12; i++) {
            var option = document.createElement('option');
            option.setAttribute('value', i);
            option.innerHTML = i;
            sel2.appendChild(option);
        }
        //生成1日—31日
        vm.days = [];
        for(var i=1;i<=31;i++){
            vm.days.push({day:i,isActive:false});
        }
        //保存某年某月的天数
        var days;
        //年份点击
        sel1.onclick = function () {
            //月份显示默认值
            sel2.options[0].selected = true;
        }
        //月份点击
        sel2.onclick = function () {
            //如果是2月
            if (sel2.value == 2) {
                //如果是闰年
                if ((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0) {
                    days = 29;
                    //如果是平年
                } else {
                    days = 28;
                }
                //如果是第4、6、9、11月
            } else if (sel2.value == 4 || sel2.value == 6 || sel2.value == 9 || sel2.value == 11) {
                days = 30;
            } else {
                days = 31;
            }
            vm.days = [];
            for(var i=1;i<=days;i++){
                vm.days.push({day:i,isActive:false});
            }
        }
    });

    //点击切换列表地图模式
    function tabsSwitch(index) {
        vm.menuList[vm.tabIndex].isActive = false;
        vm.tabIndex = index;
        vm.menuList[index].isActive = true;
        for (var i = 0; i < tableList.length; i++) {
            //mqtt链接
            connectMqtt(tableList[i].destination,function (mes) {
                for (var i = 0; i < tableList.length; i++) {
                    tableList[i].no = mes;
                }
                $table.bootstrapTable('load', tableList);
            });
        }
        $table.bootstrapTable('load', tableList);
    }

    var equipment = document.getElementById("equipmentMap");
    var isHide = true;
    //地图上弹出框收回展开
    function boxToggle() {
        equipment.style.left = isHide ? "0" : '-229px';
        isHide = !isHide;
    }

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.setMapStyle({
        styleJson:[
            {
                "featureType": "background",
                "elementType": "geometry",
                "stylers": {
                    "color": "#b6d7a8ff"
                }
            },
            {
                "featureType": "poilabel",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }
        ]
    });
    map.centerAndZoom(new BMap.Point(112.607, 37.803), 15);
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

    //添加每个用户所在点的标注
    function addUserMarker() {
        for (var i = 0; i < vm.personalList.length; i++) {
            var point = new BMap.Point(vm.personalList[i].point.long, vm.personalList[i].point.lat);
            var icon = new BMap.Icon("user.png", new BMap.Size(30, 30), {anchor: new BMap.Size(7, 10)});
            var mkr = new BMap.Marker(point, {icon: icon});//创建标注
            vm.personalList[i].personalMarker = mkr;
            map.addOverlay(mkr);//将标注添加到地图上
            addClickHandler(vm.personalList[i], mkr); //添加事件监听
        }
    }

    //标注点事件监听
    function addClickHandler(item, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(item, e);//点击打开标注点信息窗口
        });
    }

    //点击打开标注点信息窗口
    function openInfo(item, e) {
        var long;
        var lat;
        var point;
        var sContent =
            "<div class='infoWindow-box'><div class='infoWindow-title'><span>" + item.userName + "</span></div><div class='float-clear'><img src='//static/image/pumpImg.jpg' class='float-left infoWindow-img'><div class='float-left'><div class='infoWindow-detail'>当前状态：在岗</div><div class='infoWindow-detail'>当前任务：" + item.content + "</div><div class='infoWindow-detail'>当前位置：" + item.step + "</div> <div class='infoWindow-detail'>人员编号：" + item.no + "</div></div></div></div>";
        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        if (e) {
            long = e.target.getPosition().lng;
            lat = e.target.getPosition().lat
        } else {
            long = item.point.long;
            lat = item.point.lat;
        }
        point = new BMap.Point(long, lat);
        map.openInfoWindow(infoWindow, point); //开启信息窗口
        //图片加载完毕重绘infowindow
        document.getElementsByClassName('infoWindow-img').onload = function () {
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        };
        map.panTo(point);                       //将地图中心移动到当前选择点位
    }

    //点击定位指定到当前用户的标注点 打开信息框
    function jumpUserMarker(item, index) {
        personalActive(index);//选择在线人员列表样式
        map.clearOverlays();  //清除地图覆盖物
        addUserMarker();      //将点位重新标注出来
        openInfo(item, null);//点击打开标注点信息窗口
    }

    //绘制路线并启动
    var pointList = [];
    var runIndex = 0;

    function personalDriving(item, index) {
        pointList = [];
        personalActive(index);//选择在线人员列表样式
        map.clearOverlays();  //清除地图覆盖物
        for (var i = 0; i < item.runPoint.length; i++) {
            pointList.push(new BMap.Point(item.runPoint[i].long, item.runPoint[i].lat))
        }
        map.panTo(pointList[0]);                       //将地图中心移动到当前选择点位
        var group = Math.floor(pointList.length / 11);
        var mode = pointList.length % 11;
        var driving = new BMap.DrivingRoute(map, {
            onSearchComplete: function (results) {
                if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                    var plan = driving.getResults().getPlan(0);
                    var num = plan.getNumRoutes();
                    for (var j = 0; j < num; j++) {
                        var pts = plan.getRoute(j).getPath();    //通过驾车实例，获得一系列点的数组
                        var polyline = new BMap.Polyline(pts,{strokeColor:'#000'});
                        map.addOverlay(polyline);
                    }
                }
            }
        });
        for (var i = 0; i < group; i++) {
            var waypoints = pointList.slice(i * 11 + 1, (i + 1) * 11);
            //如果是11的倍数的时候
            driving.search(pointList[i * 11], pointList[(i + 1) * 11 - 1], {waypoints: waypoints});//waypoints表示途经点
        }
        if (mode != 0) {
            var waypoints = pointList.slice(group * 11, pointList.length - 1);//多出的一段单独进行search
            driving.search(pointList[group * 11], pointList[pointList.length - 1], {waypoints: waypoints});
        }
        var myIcon = new BMap.Icon("runUser.png", new BMap.Size(30, 30), {    //图片
            imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
        });
        run(pointList[0], pointList[1], myIcon)
    }

    //开始绘制
    function run(myP1, myP2, myIcon) {
        runIndex++;
        var driving2 = new BMap.DrivingRoute(map);    //驾车实例
        driving2.search(myP1, myP2);
        driving2.setSearchCompleteCallback(function () {
            var pts = driving2.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
            var paths = pts.length;    //获得有几个点
            var carMk = new BMap.Marker(pts[0], {icon: myIcon});
            map.addOverlay(carMk);
            i = 0;
            function resetMkPoint(i) {
                carMk.setPosition(pts[i]);
                if (i < paths) {
                    setTimeout(function () {
                        i++;
                        resetMkPoint(i);
                    }, 100);
                } else {
                    console.log('结束了 > ' + runIndex);
                    if (runIndex < pointList.length) {
                        run(pointList[runIndex], pointList[runIndex + 1], myIcon);
                        setTimeout(function () {
                            map.removeOverlay(carMk)
                        }, 250)
                    }
                }
            }

            setTimeout(function () {
                resetMkPoint(5);
            }, 100)
        });
    };

    //重新播放
    function rotateBtnClick() {

    }

    //开始播放
    function startBtnClick() {

    }

    //暂停播放
    function pauseBtnClick() {

    }

    var defaultData = [
        {
            name: '父节点 1',
            href: '#parent1',
            tags: ['4'],
            children: [
                {
                    name: '子节点 1',
                    href: '#child1',
                    tags: ['2'],
                    children: [
                        {
                            name: '孙子节点 1',
                            href: '#grandchild1',
                            tags: ['0']
                        },
                        {
                            name: '孙子节点 2',
                            href: '#grandchild2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    name: '子节点 2',
                    href: '#child2',
                    tags: ['0']
                }
            ]
        },
        {
            name: '父节点 2',
            href: '#parent2',
            tags: ['0']
        },
        {
            name: '父节点 3',
            href: '#parent3',
            tags: ['0']
        },
        {
            name: '父节点 4',
            href: '#parent4',
            tags: ['0']
        },
        {
            name: '父节点 5',
            href: '#parent5',
            tags: ['0']
        }
    ];

    //点击改变在线人员列表状态
    function personalActive(index) {
        vm.personalList[vm.oldIndex].isActive = false;
        vm.oldIndex = index;
        vm.personalList[index].isActive = true;
    }

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //绘制左侧树
        $('#treeview7').treeview({
            color: "#666",
            showBorder: false,
            data: defaultData,
            onNodeSelected: function (event, data) {
                vm.treeTitle = {
                    id: data.id,
                    name: data.name
                }
                //TODO:通过ID获取设备详细信息  ajax
            }
        });
    });
    //添加每个用户所在点的标注
    addUserMarker();
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>
